<template>
  <div v-if="client" style="margin:0 40px 0 0px">
    <el-form ref="form" label-width="120px" size="mini">
      <el-form-item label="名称">
        <el-input v-model="client.clientName"></el-input>
      </el-form-item>
      <el-form-item label="公司">
        <el-select v-model="client.companyId" placeholder="选择公司">
          <el-option v-for="company in companies" :key="company.id" :label="company.companyName" :value="company.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="类型">
        <el-select v-model="client.clientTypeId" placeholder="选择平台">
          <el-option
            v-for="ct in clientTypes"
            :key="ct.id"
            :label="ct.id+'、'+ct.name"
            :value="ct.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="公开">
        <el-switch on-text="" off-text="" v-model="client.isPublic"></el-switch>
      </el-form-item>

      <el-form-item label="可用">
        <el-switch on-text="" off-text="" v-model="client.isEnable"></el-switch>
      </el-form-item>
      <el-form-item label="属性？" >

        <el-table :data="client.tableData" style="width: 100%">
          <el-table-column type="index" width="30" >
        </el-table-column>
        <el-table-column label="关键词" width="180">
          <template slot-scope="scope">
            <el-input v-show="scope.row.edit" size="small" v-model="scope.row.key"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.key}}</span>
          </template>
        </el-table-column>
        <el-table-column label="详情" width="200">
          <template slot-scope="scope">
            <div v-if="typeof(scope.row.value) === 'string'">
              <el-input  v-if="scope.row.edit" size="mini" v-model="scope.row.value"></el-input>
              <span  v-if="!scope.row.edit">{{scope.row.value}} {{typeof(scope.row.value)}}</span>
            </div>
            <div v-else>
              <el-input  v-if="scope.row.edit" size="mini" :value="JSON.stringify(scope.row.value)" ></el-input>
              <span  v-if="!scope.row.edit">{{JSON.stringify(scope.row.value)}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="changeObjStr(scope.row)">转换</el-button>
            <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope)' size="mini" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
            <el-button @click='del(scope)' size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

        <el-button @click="addClientAttributes">
          <icon name="plus"></icon>
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="客户端属性" :visible.sync="showClientPropDialog" append-to-body v-if="showClientPropDialog">
      <client-props :clientProps="currClientProps"></client-props>
    </el-dialog>
  </div>
</template>

<script>
  import clientProps from './clientProps'
  import {mapActions} from 'vuex'
  import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item.vue";
  export default {
    components: {ElFormItem,clientProps},
    name: 'edit-client-form',
    props:['client','companies','app'],
    data(){
      return {
        clientTypes:[],
        showClientPropDialog:false,
        currClientProps:null,
        clientData:null
      }
    },
    watch:{
      client(nv,ov){
        if(nv) this.init(nv)
      }
    },
    created(){
      console.log('哪来的tableData------------',this.client)
      this.init(this.client)
      this.fetch({name:"getClientTypeList"})
        .then(res=>{
          if(res.errCode){
            console.log(res)
            this.$message({type:'error',message:res.errMsg})
          }else{
            console.log(res)
            this.clientTypes = res
          }
        })
        .catch(err=>{
          console.log(err)
          this.$message({type:'error',message:'服务器错误'})
        })
      //还需获取属性值列表
    },
    methods:{
      ...mapActions({
        fetch:'fetch'
      }),
      init(client){
        let data=client.tableData
        data.forEach(a=>{
          a.type=typeof a.value
        })
      },
      del(e){
        console.log(e)
        this.client.tableData.splice(e.$index,1)
      },
      changeObjStr(e){
        console.log('看一下！！！！',e)
        if(e.type === 'object'){
          console.log('是对象')
          e.value=JSON.stringify(e.value)
          e.type='string'
        }else if(e.type === 'string'){
          console.log('是字符串')
          e.value=JSON.parse(e.value)
          e.type='object'
        }
      },
      confirm(e){
        console.log(e.row)
        e.row.edit = !e.row.edit
        console.log(e)
      },
      addClientAttributes(){
        let tb = {key: '', value:'',edit:true}
        console.log(this.client)
        this.client.tableData.push(tb)
      },

      validateForm(form){
        let result = undefined;
        if(!form.clientName) result = '客户端名称';
        if(!form.companyId) result = '公司';
        if(result){
          this.$message({
            message:result + '不能为空',
            type: 'error'
          });
          return false;
        }else{
          return true;
        }
      },
      submit(){
        console.log(this.client)
        if(this.validateForm(this.client)){
          let clientData={}
          if(this.client.tableData&&this.client.tableData.length>0)//将tableData内的key,value组装成对象，
            this.client.tableData.forEach((td)=>{
              clientData[td.key]= td.value
            })
          console.log('最后提交的是啥---------',clientData)
          // return
          this.$store.dispatch({
            type:'fetch',
            name:'updateClient',
            data:{id:this.client.id,
              clientTypeId:this.client.clientTypeId,
              clientName:this.client.clientName,
              companyId:this.client.companyId,
              isEnable:this.client.isEnable,
              isPublic:this.client.isPublic,clientData:JSON.stringify(clientData)//以字符串形式提交并告知参数名
            },
          }).then(res=>{
            if(res.errCode){
              this.$message({
                message:res.errMsg,
                type: 'error'
              })
            }else{
              console.log(res)
              this.client = res
              this.$message({
                message:'编辑成功',
                type: 'success'
              });
              this.$emit('cancel');
            }
          }).catch(error=>{
            this.$message({
              message:'连不上服务器',
              type: 'error'
            });
          })
        }
      },
      cancel(){
        this.$emit('cancel');
      }
    }
  }
</script>
